<template>
  <view class="wrap">
    <view class="simplify-bg">
      <view class="bg-after"></view>
    </view>
    <view class="simplify-bg bottom">
      <view class="bg-after"></view>
    </view>
    <view class="top"></view>
    <view class="content">
      <!-- <view class="logo">
        <img src="/static/images/public/logo.png"/>
      </view> -->
      <view class="title">欢迎登录</view>
      <input class="input-phone" focus type="number" v-model="tel" placeholder="请输入手机号"
        placeholder-style="color:#bbbbbb" />
      <!-- <view class="tips">未注册的手机号验证后自动创建账号</view> -->
      <view class="tips">输入已注册账户的手机号进行登录</view>
      <button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
      <view class="alternative">
        <view class="password" @click="loginForPwd">密码登录</view>
        <view class="issue" @click="issue">遇到问题</view>
      </view>
    </view>
    <view class="buttom">
      <view class="loginType">
        <!-- 根据项目对接情况显隐 -->
        <view class="wechat item" @click="loginForWX">
          <view class="icon"><u-icon size="80rpx" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
          微信
        </view>
        <view class="QQ item" @click="loginForQQ">
          <view class="icon"><u-icon size="80rpx" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
          QQ
        </view>
        <view class="zhifubao item" @click="loginForZFB">
          <view class="icon"><u-icon size="80rpx" name="zhifubao" color="#0078d4"></u-icon></view>
          支付宝
        </view>
      </view>
      <view class="hint">
        登录代表同意
        <text class="link">用户协议、隐私政策，</text>
        并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
      </view>
    </view>
  </view>
</template>
<script>
// 定义唯一的事件标识（注意不要和其他页面重复）
const eventName = "message-check-login";
export default {
  data() {
    return {
      tel: "",
    };
  },
  computed: {
    inputStyle() {
      let style = {};
      // 正则判断是手机号
      const phoneRex = /^1[3456789]\d{9}$/;

      if (this.tel && phoneRex.test(this.tel)) {
        style.color = "#fff";
        style.backgroundColor = "var(--kui-color-theme)";
      }
      return style;
    },
  },
  methods: {
    submit() {
      // 判断手机号格式
      if (this.$u.test.mobile(this.tel)) {
        // 交给其他页面做交互，回调的处理逻辑通过监听事件处理
        uni.navigateTo({
          url: "./code?eventName=" + eventName + "&tel=" + this.tel,
        });
      } else {
        uni.showToast({ title: "请输入正确的手机号", icon: "none" });
      }
    },
    // 密码登录
    loginForPwd() {
      uni.hideLoading();
      uni.navigateTo({
        url: "./loginPwd",
      });
    },
    // 遇到问题
    issue() {
      uni.navigateTo({ url: "/pages/subFeeback/feedbackIndex/feedbackIndex" });
    },
    // 三方登录
    loginForZFB() { },
    loginForWX() { },
    loginForQQ() { },
  },
  onLoad() {
    // 监听短信验证码输入验证事件
    uni.$on(eventName, (result) => {
      console.log("message-check : ", result);
      uni.showLoading({ title: "正在验证" });
      const timer = setTimeout(() => {
        clearTimeout(timer);
      }, 3000);
    });
  },
  onUnload() {
    // 销毁监听事件
    uni.$off(eventName);
    uni.hideLoading();
    console.log("页面销毁");
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  background: white;
  font-size: 28rpx;
  padding: 20rpx 0;

  .content {
    z-index: 1;
    position: relative;
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      text-align: left;
      font-size: 50rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }

    .input-phone {
      font-weight: bold;
      color: var(--kui-color-theme);
      // background-color: white;
      // padding: 20rpx 15rpx;
      // border-radius: 10rpx;
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
      position: relative;
      font-size: 38rpx;
    }

    .tips {
      color: #d4d4d4;
      margin-bottom: 60rpx;
      margin-top: 8rpx;
    }

    .getCaptcha {
      background-color: $kui-color-theme-light;
      color: white;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }

    .alternative {
      color: $uni-text-color-grey;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .buttom {
    position: relative;
    z-index: 1;
    .loginType {
      display: flex;
      padding: 350rpx 150rpx 150rpx 150rpx;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $uni-text-color;
        font-size: 28rpx;
      }
    }

    .hint {
      padding: 20rpx 40rpx;
      font-size: 25rpx;
      color: $uni-text-color-grey;

      .link {
        color: var(--kui-color-theme);
      }
    }
  }
}

.simplify-bg {
  background-image: radial-gradient($kui-color-theme, transparent 63%);
  width: 230px;
  height: 288px;
  transform: rotateZ(243deg);
  position: absolute;
  left: 0px;
  top: -120px;
  opacity: 0.8;
  filter: blur(80rpx);
  z-index: 0;
  // -webkit-backdrop-filter: blur(80rpx);
  // backdrop-filter: blur(80rpx);

  &.bottom {
    left: auto;
    top: auto;
    right: -120px;
    bottom: 50px;
    background-image: radial-gradient($kui-color-theme, transparent 33%);
  }


  .bg-after {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#0c0c0c00 2px, #ffffff 2px);
    background-size: 4px 4px;
    backdrop-filter:
      /*   saturate(22%)  */
      blur(20px);
  }
}


.logo{
  filter: brightness(1.5);
  img {
    width: 260rpx;
    height: 100rpx;
  }
}
</style>
